<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 内容卡片区 -->
        <el-card>
            <div id="main" style="width: 600px;height: 400px;"></div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { options } from "less"
export default {
    data() {
        return {
            options: {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            }
        }
    },
    mounted() {
        let myChart = echarts.init(document.getElementById('main'))
        // 指定图表的配置项和数据
        this.$http.get("reports/type/1").then( ({data}) => {
            // 使用刚指定的配置项和数据显示图表。
            Object.assign(this.options, data)
            // console.log(data);
            myChart.setOption(data);
        })


    }
}
</script>

<style>
</style>